<template>
  <div>
    <h1 id="play">play</h1>
    <h1 ref="msgDom">{{msg}}</h1>
    <button @click="toChange">修改</button>
    <hr>
    <h1>爷爷辈组件</h1>
    <hr>
    <playOne></playOne>
  </div>
</template>
<script setup>
// vue3  进行打包优化tree shaking(树摇)优化  基于es6模块化
// 导入哪些内容 打包哪些内容

  import {ref,nextTick,provide} from 'vue'

  import playOne from './playOne.vue'
  let msg=ref("你好")
  let msgDom=ref(null)
  let toChange=()=>{
    msg.value="hello"
    // 立即获取dom
    nextTick(()=>{ //nextTick dom更新获取更新后的dom的方法
      console.log(msgDom.value.innerHTML)
    })
  }
  // setup环境中，nextTick方法可以操作dom
  nextTick(()=>{
     document.querySelector("#play").style.color="red"
  })

  // provide 方法传给后代组件数据
  // provide("key","value")
  let car=ref("爷爷辈组件的数据 car")
  provide("car",car.value)
</script>